<template>
  <el-container>
    <el-header>
      
    </el-header>
    <el-main>
      <div style="margin-left:10%;hight:100px;" >
        <el-row :gutter="20">
          
          <el-col :span="8" class="kjfs kjfs-bluee" 
          v-loading="loading"
          element-loading-text="正在上传app"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(130, 121, 120, 0.8)"
          style="background-color:#F8BA0B;margin-right:1%;height:500px;width:400px">
            <ul>
            
            <el-upload
              class="upload-demo"
              :auto-upload="false"
              :http-request="uploadFile"
              :headers="Header"
              ref="upload"
              drag
              :on-success="fileclear"
              action="/v1/app/fileup"
              clearFiles
              :file-list="fileList"
              accept=".apk,.ipa,.IPA"
              style="margin-top:35%;margin-left:2.5%"  
              >
              <!-- :on-change="SaveToUrl" -->
              <!-- :http-request="uploadFile" -->
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
              
            <el-progress color='#f56c6c' :stroke-width="10" :percentage="bmsg" v-show="act"></el-progress>
            <el-button style="margin-left: 37%;margin-top:20%;" size="small" type="success" :disabled="isclick" :loading="isloding"  @click="submitUpload">上传到服务器</el-button>
            </ul>
          </el-col>
          <div v-for="(item,index) in applist">
            <!-- <router-link to="/appdetail/" class="kjfs kjfs-bluee" style="boder-top-left-radius：30px">{{item.url}}</router-link> -->
            <el-col :span="8" class="card kjfs" style="height:500px;margin-right:1%;margin-bottom:1%;width:400px;background-color:#FEFCFC;">
            <p class="title" style="font-size: 20px">
            <i v-if="item.Types=='ios'" class="fa fa-mobile fa-2x"></i>
            <i v-if="item.Types=='android'" class="fa fa-android fa-2x"></i>
            {{item.AppName}}
            </p>
            <!-- <ul class="kjfs kjfs-bluee"> -->
            
            <div class="kjfs kjfs-bluee" id = "ul" style="height: 420px;">
            
            <div class="icodiv" id="icodiv">
              <img :src=" item.Img" style="border-radius: 7px">
            </div>
            
            
            <div class="info" >
            <!-- <li><span>版本：</span> {{item.BuildNum}}</li> -->
            <li>
            <span>包名：</span>
            {{item.Name}}
            </li>
            版本：{{item.Version}}
            </li>
            <div></div>
            </li>
            渠道：{{item.Channel}}
            </li>
            <li>
            <i class="fa fa-th-large fa-tags"></i>
            <span>{{item.Types}}</span>
            </li>

            <li>
            <span class="descView">更新说明：</span>
              {{item.Describe}}
            </li>
            <li>

            <li>
            <a :href="item.Uuid" class="fa fa-cloud-download" ></a>
            </li>

            </div>
            
            <div class= "qrdiv">
              <li>
              <img id="qrimg" :src=" item.Qr">
              </li>
            </div>
            
            <!-- </ul> -->
            </div>
          </el-col>
          </div>
        </el-row>
      </div>
      <el-dialog
        title="应用描述"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>

        <!-- <span>应用描述</span> -->
        <span slot="footer" class="dialog-footer">
        <div> 

          <el-input 
          type="textarea"
          :rows="2" 
          v-model="msg"
          placeholder="请输入内容">
          </el-input>
          
          
        </div>
        <br>
          <el-select v-model="channel" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        <div class="btn_sub">
          <br>
          <el-button type="primary" @click="inputMsg" >确 定</el-button>
        </div>
          <!-- <el-button type="primary" @click="processButtonClick">确 定</el-button> -->
        </span>
        

        
      </el-dialog>
    </el-main>
  </el-container>
    
 



</template>

<script>
import axios from 'axios';
import { requestApplist } from '../../api/api';
import { uploadByPieces } from "../../js/utils";
import Getmd5 from 'js-md5';
export default {
  name: 'appupload',
  provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                    
      return {
          reload: this.reload                                              
      }
  },
  data() {
    return {
      fileMD5:'',
      isclick:false,
      dialogImageUrl: '',
      dialogVisible: false,
      centerDialogVisible:false,
      disabled: false,
      loading:false,
      isloding:false,
      msg:"",
      fileData: new FormData(),
      applist:[],
      isRouterAlive: true,
      message:"sdfdsfsd",
      fileList:[],
      inputfile:'',
      bmsg:0,
      act:false,
      channel: "founder",
      Header: {'Authorization':sessionStorage.token.replace("\"","").replace("\"","")},
      fileRederInstance : new FileReader(),
      options: [{
          value: 'huawei',
          label: '华为'
        }, {
          value: 'vivo',
          label: 'vivo'
        }, {
          value: 'oppo',
          label: 'oppo'
        }, {
          value: 'xiaomi',
          label: '小米'
        }, {
          value: 'anzhi',
          label: '安智'
        }, {
          value: 'samsung',
          label: '三星'
        }, {
          value: '360',
          label: '360'
        }, {
          value: 'SouGou',
          label: '搜狗'
        }, {
          value: 'Lenovo',
          label: '联想'
        }, {
          value: 'Tencent',
          label: '应用宝'
        }, {
          value: 'founder',
          label: '手迹官方'
        }, {
          value: 'LeShi',
          label: '乐视'
        }, {
          value: 'BaiDu',
          label: '百度'
        }, {
          value: 'MeiZu',
          label: '魅族'
        }, {
          value: 'UC',
          label: 'uc'
        }],
    };
  },
  mounted:function () {
      this.apps();
  },
  methods: {
  handleRemove(file) {
    console.log(file);
  },
  handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  },
  apps() {
    let par = {"type":""} 
    requestApplist(par).then(res => {
      let { msg, code, data } = res;
      this.applist = data.List;
    }).catch( () => {
        this.$message.error("数据请求失败");
    });;
  },
  handleDownload(file) {
    console.log(file);
  },
  SaveToUrl(event) {
    var that = this;
    that.isloding = true;
    that.inputfile = event.raw;
    console.log(that.inputfile);
    that.fileRederInstance.readAsBinaryString(that.inputfile);
    that.fileRederInstance.addEventListener('load', e => {
        let fileBolb = e.target.result;
        that.fileMD5 = Getmd5(fileBolb);
        that.$message("文件加载成功 "+that.inputfile.size/1024/1024+"M")
        that.isclick = false;
        that.isloding = false;
    });

  },
  uploadFile(f){
    console.log(f.file.type);
    this.fileData.append("file",f.file);
    console.log(this.fileData);
    // const isApp = (f.file.type === 'application/x-itunes-ipa' || f.file.type === 'application/x-itunes-ipa');
    // const isLt2M = file.size / 1024 / 1024 < 2;

    // if (!isJPG) {
    //   this.$message.error('上传头像图片只能是 JPG 格式!');
    // }
    // if (!isLt2M) {
    //   this.$message.error('上传头像图片大小不能超过 2MB!');
    // }
    // return isJPG && isLt2M;
    // if (f.file.type === "image/png" || f.file.type ==="image/jpeg"){
    //   this.fileData.append("appfile",f.file);
    // }

    },
    processButtonClick() {
      var that =this;
      that.loading = true;
      that.centerDialogVisible = false;
      var that = this;
      that.act = true;
      uploadByPieces({
          file: that.inputfile,
          descmsg:that.msg,
          fileMD5:that.fileMD5,
          pieceSize: 2, //分片大小
          success: data => {
              that.upload = true;
              that.isfinish = "success"
              console.log("分片上传视频成功");
              that.apps()
              that.loading = false;
              that.act = false;
              that.fileRederInstance = new FileReader();
          },
          error: e => {
              console.log("分片上传视频失败");
          },
          Count: data =>{
              that.count = data;
          },
          Chunknum: data =>{
              var t = (data/that.count)*100;
              that.bmsg = Math.round(t);
              console.log(that.bmsg);
          }
      });
      that.reload();
      that.fileList = [];
      that.msg = "";
      
  },
  reload () {
    this.isRouterAlive = false;            //先关闭，
    this.$nextTick(function () {
        this.isRouterAlive = true;         //再打开
    }) 
  },
  fileclear(file, fileList){
    console.log(file, fileList);
  },
  inputMsg(){
    var that = this;
    that.loading = true;
    that.centerDialogVisible = false;
    that.fileData.append("msg",that.msg);
    that.fileData.append("channel",that.channel);
    
    that.$refs.upload.submit();
    // that.$loading.show('查询接口中');
    axios.post("/v1/app/fileup",that.fileData,{ retryDelay: 8000 }).then(res => {
      let { code, msg, data } = res;
      if (data.code == 200){
        that.$message("上传成功")
        that.apps()
        that.loading = false;

      }else{
        that.loading = false;
        that.$message.error("app上传失败"+data.data);
      }
    }).catch(function(error) {
      console.log(error);
      that.loading = false;
      that.$message.error("数据请求失败");
    });


    that.reload();
    that.fileData = new FormData();
    that.fileList = [];
    that.msg = "";
    // this.loading = false;
    // console.log(this.loading);
    
    
  },
  submitUpload() {
    this.$refs.upload.submit();
    this.centerDialogVisible = true;
  },goBack() {
    console.log('go back');
  },
  beforeAvatarUpload(file) {
     
      // console.log("dddd"+file.type);
      // const isApp = (file.type === 'application/x-itunes-ipa' ||  file.type === 'application/x-itunes-ipa');
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // console.log("dddd"+isApp);
      // if (!isApp) {
      //   this.$message.error('只能上传apk和ipa文件');
      // }
      return true;
    },
  }
}
</script>

<style type="text/css">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  h3{
    margin: 55px 0 20px;
    font-weight: 400;
    color: #1f2f3d;
    font-size: 22px;
  }
  p{
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
  }
  
  #qrimg{
    text-align: center;
    width: 150px;
    height: 150px;
    border: #000 solid 1px;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    transition:all 0.6s;
  }
  #btn_sub{
    margin-top: 10px;
  }
  #qrimg img{
    -webkit-transition:-webkit-transform 1s ease 0s;

　　transition:transform 1s ease 0s;

　　-webkit-transform-origin:center;

　　transform-origin:center;
  }
  .qrdiv{
    width: auto;
    height: 500px;
    text-align: center;
    overflow: hidden;
  }
  .qrdiv:hover{
    -webkit-transform: scale(1.2);
    transform: scale(1.6);
  }

  .icodiv{
    height: 100px;
    margin: 10px;
    margin-bottom: 30px;
    text-align: center;
    /*border-radius:5px,5px,5px,5px;*/
  }
  #icodiv img{
    width: auto;
    height: auto;
    margin-bottom:1%;
    margin-top:3%;
    max-width: 80%;
    max-height: 80%; 
    border-radius:17px;
    text-align: center;
  }
  .info{
  margin-top:5%;
  height: 30%;
  text-align: center;
  }
  #ul{
    height: 440px;
    background-color:#F7F6F2;
  }
  .progre{

  }
  .descView{
    word-break:normal; 
    width:auto; 
    display:block; 
    white-space:pre-wrap;
    word-wrap : break-word ;
    overflow: hidden ;

}
  
</style>

